<template>
    <div class="homeCon" style="height:100%">
        <mt-swipe :auto=2000>
            <mt-swipe-item v-for="item in imgItem" :key="item">
                <img :src="item" alt="">
            </mt-swipe-item>
        </mt-swipe>
        
        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/Home/NewList">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">News</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/Home/imageInfo">
		                    <span class="mui-icon mui-icon-email"></span>
		                    <div class="mui-media-body">Image</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">Chat</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">location</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">Search</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">Phone</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">Setting</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-info"></span>
		                    <div class="mui-media-body">about</div></a></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">more</div></a></li>
		</ul> 
    </div>
</template>

<script>
export default {
  data() {
    return {
      imgItem: null
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$http.get("/data.json").then(
        data => {
          this.imgItem = data.body.imgItem;
        },
        () => {
          Toast("获取数据出错");
        }
      );
    }
  }
};
</script>

<style lang="scss">
.homeCon{
  height: 500px;
  .mint-swipe {
  width: 100%;
  height: 200px;
    .mint-swipe-item {
      background: url("../images/picLoading.gif") no-repeat center;
        img{
             width: 100%;
        }
    }
  }
}

</style>